<template>
  <div>
    <div id="container"></div>
    <!-- <div>{{ address }}</div> -->
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      address: "黑龙江省",
    };
  },
  props: {
    // 图片数量限制
    lng: {
      type: Number,
      default: null,
      // default: 126.661998,
    },
    lat: {
      type: Number,
      default: null,
      // default: 45.742253,
    },
  },
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "b086fdae2c792e37adc76ff20b8da80f",
      };
      AMapLoader.load({
        key: "b9dd0846de9903ab83eecb0e103ad1bc", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder", "AMap.Geolocation", "AMap.MarkerCluster"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [this.lng, this.lat], // 初始化地图中心点位置
          });
          const geocoder = new AMap.Geocoder();
          var marker = new AMap.Marker();

          const lnglat = [this.lng, this.lat];

          geocoder.getAddress(lnglat, (status, result) => {
            console.log("111", status, result);
            if (status === "complete" && result.info === "OK") {
              console.log("222", result.regeocode.formattedAddress);
              this.address = result.regeocode.formattedAddress;
              marker.setPosition(lnglat);
              marker.setTitle(this.address);

              var text = new AMap.Text({
                position: new AMap.LngLat(this.lng, this.lat),
                anchor: "top-center",
                text: this.address,
              });
              this.map.add(text);
            }
          });
          this.map.add(marker);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
